<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>ichartjs 示例</title>
		<meta name="Description" content="The ichartjs's gallery center,ichartjs 示例中心" />
		<meta name="Keywords" content="ichartjs demo,Html5 demo,ichartjs示例,ichartjs示例,Html5示例,Html5示例" />
		<script type="text/javascript" src="../../ichart.1.2.1.min.js"></script>
		<link rel="stylesheet" href="../css/demo.css" type="text/css"/>
		<script type="text/javascript">
		$(function(){	
			var data = [
			        	{name : 'Alex',value : 10,color:'#8658a5'},
			        	{name : 'Mark',value : 30,color:'#4ac2db'},
			        	{name : 'David',value : 40,color:'#dd4b4b'},
			        	{name : 'Graham',value : 55,color:'#add14f'},
			        	{name : 'John',value : 70,color:'#f47721'}
		        	];
	    	
	    	//是否启用动画
			var animation = false;
	    	
			var chart = new iChart.Column2D({
				render : 'canvasDiv',
				data: data,
				title : {
					text : 'This is a sample for Combination',
					color : '#3e576f'
				},
				subtitle : {
					text : 'Top 5 Sales Person,2011',
					color : '#6d869f'
				},
				footnote : {
					text : 'ichartjs.com',
					color : '#909090',
					fontsize : 11,
					padding : '0 38'
				},
				width : 800,
				height : 400,
				animation : animation,
				animation_duration:600,
				shadow : true,
				shadow_blur : 2,
				shadow_color : '#aaaaaa',
				shadow_offsetx : 1,
				shadow_offsety : 0,
				column_width : 68,
				label:{
					color:'#4c4f48'
				},
				sub_option:{
					label : {
						color : '#4c4f48'
					},
					listeners:{
						parseText:function(r,t){
							//自定义柱形图上方label的格式。
							return '$'+t+'k';
						}
					}
				},
				coordinate:{
					background_color : '#4a4b4f',
					grid_color : '#676a73',
					striped_factor:0.06,
					height:'84%',
					width:'84%',
					scale:[{
						 position:'left',	
						 start_scale:0,
						 scale_space:10,
						 label:{
							color:'#4c4f48'
						 },
						 listeners:{
							parseText:function(t,x,y){
							//自定义左侧坐标系刻度文本的格式。
								return {text:'$'+t+'k'}
							}
						 }
					}]
				}
			});
			var pie = new iChart.Pie2D({
				data: data,
				label:{
					color:'#4c4f48'
				},
				sub_option:{
					mini_label_threshold_angle : 60,//迷你label的阀值,单位:角度
					mini_label:{//迷你label配置项
						fontsize:10,
						fontweight:600,
						color : '#ffffff'
					},
					label : {
						background_color:null,
						sign:false,//设置禁用label的小图标
						padding:'0 4',
						border:{
							enable:false,
							color:'#666666'
						},
						fontsize:10,
						fontweight:600,
						color : '#ffe383'
					},
					listeners:{
						parseText:function(d, t){
							return d.get('value');//自定义label文本
						}
					} 
				},
				text_space : 16,
				showpercent:true,
				decimalsnum:1,
				align : 'left',
				offsetx:chart.coo.get('originx')+30,
				offsety:-(chart.get('centery')-chart.coo.get('originy')-90),
				animation : animation,
				radius:60
			});
			
			chart.plugin(pie);
			
			 //利用自定义组件构造左侧说明文本。
			chart.plugin(new iChart.Custom({
					drawFn:function(){
						 //计算位置
						var coo = chart.getCoordinate(),
							x = coo.get('originx'),
							y = coo.get('originy'),
							H = coo.height;
						//在左侧的位置，渲染说明文字。
						chart.target.textAlign('center')
						.textBaseline('middle')
						.textFont('600 13px Verdana')
						.fillText('Sales Figure',x-50,y+H/2,false,'#6d869f', false,false,false,-90);
						
					}
			}));

			chart.draw();
		});
		
		</script>
		</head>
		<body>
			<div id='canvasDiv'></div>
			<div class='ichartjs_info'>
				<span class='ichartjs_author'>written by <a title="示例的贡献者" href="mailto:taylor@ichartjs.com">taylor</a></span>
				<span class='ichartjs_btn' onmouseover="this.style.color='#2f99ff'" onmouseout="this.style.color='#0b2946'" onclick="window.top.viewCode(document);">View Code</span>
				<div class='ichartjs_sm'>说明</div>
				<div class='ichartjs_details'>
					这是一个2D柱形图组合2D饼图的示例，该示例中柱形图展示了公司年度销售5强的情况。饼图展示了5强各占百分比情况。
				</div>
				<span class='ichartjs_sm'>备注：</span>
				<span class='ichartjs_details'>
					示例数据来源网络。仅供参考。
				</span>
			</div>
		</body>
</html>